<extend name="Base/common" />

<block name="style">
    <load href="__CSS__/cart/common.css" />
    <load href="__CSS__/cart/checkout.css" />
    <load href="__CSS__/cart/shoppingcar.css" />
</block>

<block name="body">
    <div class="checkoutBox">
        <div class="wrapper cf">
            <div class="col4-1">
                <h3 class="font24">您的购物袋 :共&nbsp;<strong style="color:#026395;" class="sub_num"></strong>&nbsp;件<a href="{:U('Home/GoodsClassify/classify/id/1')}" value="13">继续购物</a> </h3>

                <div class="checkoutProList">
                    <!-- form表单 -->
                    <form id="checkoutcarform" method="post" action="{:U('cart/account')}" name="form1">
                    <!-- 为空则显示去购物 -->
                    <empty name="data">
                        <div class="">
                            <div class="cartButton">
                                <a class="btnCommon btnBlueLinear btnArrow w200"  href="{:U('index/index')}">去购物<em></em></a>
                            </div>
                        </div>
                    <else />
                        <!-- 不为空 -->
                        <!-- 遍历购物车 -->
                        <foreach name="data" item="val">

                            <input type="hidden" name="user_id" value="{$val['user_id']}">
                            <div class="checkoutProBox cf" id = "cart_{$val['goods_id']}">
                                <!-- 图片框 -->
                                <div class="checkoutProImg fl">
                                    <a target="blank"><img width="130"  src="{$val['image']}" /></a>
                                </div>

                                <div class="checkoutPorTxt">
                                    <a class="checkoutproTit" title="{$val['goods_name']}" href="">{$val['goods_name']}</a>
                                    <p class="info">
                                        <span>数量：</span>
                                        <span class="num">{$val['num']}</span>
                                    </p>
                                    <p class="info"><span>颜色：</span>{$val['color']}</p>
                                    <p class="info"><span>尺码：</span>{$val['size']}<em></em></p>
                                    <div class="link">
                                        <input type="hidden" class="id" value="{$val['id']}">
                                        <a class="checkProFavor" href="#">收藏</a> |
                                        <a class="r3shoppingCartEdit" href="#">编辑</a> |
                                        <a id="del_6221747" onclick="cartdel(goods_id={$val['goods_id']} , this)">删除</a>
                                    </div>
                                </div>
                                <div class="checkProTotal"><i style="font-style:normal;float:left;">￥&nbsp;</i><div class="total" style="float:left;">
                                    {$val['num'] * $val['price']}
                                </div></div>

                                <!--  -->
                                <div class="copySelect  w70 fr" value="20">
                                    <input type="hidden" class="id" value="{$val['id']}">
                                    <select class="supdate" data-utag="['S94388',599]">
                                        <for start="1" end="11" step="1" name="i">
                                            <if condition="($val.num eq $i)">
                                            <option value="{$i}" selected="selected">{$i}</option>
                                            <else />
                                            <option value="{$i}">{$i}</option>
                                            </if>
                                        </for>
                                    </select>
                                    <div class="selectBox">
                                        <div class="selectVal" value="33">2</div>
                                        <div class="selectNav" value="35"><em></em></div>
                                    </div>
                                </div>
                                <div style="DISPLAY: block" class="checkPrice"><i style="font-style:normal;float:left;">￥</i><div  class="price" style="float:left;">{$val['price']}</div>&nbsp;&nbsp;</div>
                            </div>
                        </foreach>
                        <div class="cartButton">
                            <a class="btnCommon btnBlueLinear btnArrow w200" title="结算" href="javascript:document.form1.submit();" id="jiesuan">结算<em></em>
                            </a>
                            <span class="tishi"></span>
                        </div>
                    </empty>
                </form>
                </div>
                <img src="__IMG__/cart/service.jpg" />
            </div>

            <div class="col4 last">
                <div class="cartItem">
                    <a class="btnCommon btnBlueLinear btnArrow w200" title="结算" href="javascript:document.form1.submit();">结算<em></em></a>
                    <h3>订单摘要：共&nbsp;<strong class="sub_num"></strong>&nbsp;件</h3>
                    <div class="contentBox">
                        <div class="item">商品总额<i style="font-style:normal;float:right">元</i><span class="itemtotal">￥0</span></div>
                        <div class="item line">优惠总额<span>￥0</span></div>
                        <div class="item">商品总计<i style="font-style:normal;float:right;">元</i><span class="itemtotal">￥0</span></div>
                    </div>
                </div>
                <!--优惠代码start-->
                <div id="discount-coupon-form">
                    <div class="cartItem">
                        <h4 value="15">优惠代码<i class="icon"></i></h4>
                        <div class="sliderContent">
                           <div class="coupon">

                                <input id="coupon_code" name="coupon_code" placeholder="优惠代码" />
                                <p>请输入优惠代码</p>
                                <a class="btnCommon btnBlueLinear btnArrow w200" title="使用">使用<em></em></a>
                           </div>
                           <!--start coupon list-->
                           <div class="couponList"></div>
                        </div>
                    </div>
                </div>

                <div class="infoBox">
                    <h4>帮助？</h4>
                    <a href="">关于订单</a>
                    <br />
                    <a href="">验收验货</a>
                    <br />
                    <a href="">物流配送</a>
                    <br />
                    <a href="">售后服务</a>
                </div>
                <!--help end-->
                <div class="infoBox">
                <h4>我们接受下列付款方式</h4>
                <img src="__IMG__/cart/pay.jpg" />
            </div>
            </div>
        </div>
    </div>
</block>

<block name="script">
    <load href="__JS__/cart/shoppingcar.js"/>
    <load href="__JS__/cart/frame.js"/>
    <load href="__JS__/cart/common.js"/>
    <script>
        //初始化商品总额
        var total_money=0;
        $(function(){
            //找到页面遍历出来的商品总额
            $('body').find('.total').each(function(){
                //获取页面的每一条购物车商品总额
                var num1 = $(this).html();
                //float浮点化
                num1 = parseFloat(num1);
                //自动相加获得总值
                total_money  += num1;
            });
            //写入页面商品总额
            $('body').find('.itemtotal').html(total_money);

            // 获取购物车每一行的初始数量，相加后放到数量总计处
            var sub_num = 0;
            $('.num').each(function(){
                sub_num += parseInt($(this).html());
            });
            $('.sub_num').html(sub_num);
        });

        //初始化修改后的商品总额
        var modify_money = 0;
        /* 根据select选择动态显示价格信息  */
        $('.supdate').on('change',function(){
            //从页面获取当前遍历出来的修改后的商品的价格和数量

            var price = $(this).parent().siblings().find('.price').html();
            var num = parseInt($(this).val());

            // 原来的数量
            var Original = parseInt($(this).parent().prev().prev().find("span[class=num]").html());
            $(this).parent().prev().prev().find("span[class=num]").html(num);
            var sub_num = parseInt($('body').find('.sub_num').html());

            // 新的商品总数
            var new_sub_num = sub_num - Original + num;
            $('body').find('.sub_num').html(new_sub_num);

            // 修改右上角购物车数量
            $('#shopcount').html(new_sub_num);

            //计算单商品小计
            var modify_money = num * price;

            //写入页面
            $(this).parent().siblings().find('.total').html(modify_money);

            //浮点化
            var num2 = parseInt(modify_money);

            //遍历出页面该遍之后的值
            var  moditotal = 0;
            $('.total').each(function(i){
                var modi = parseInt($('.total').eq(i).html());
                moditotal += modi;
            });

            //再次写入页面
            $('body').find('.itemtotal').html(moditotal);

            //ajax写入数据库
            var id = $(this).parent().find('.id').val();
            $.post("{:U('modifycart')}", {id:id, num: num},
              function(data){
                //
            });
        });


        //删除购物车信息
        function cartdel(goods_id=0 , obj){

            //找到cart_id
            var id         = $(obj).parent().find('.id').val();
            var num        = parseInt($(obj).parent().parent().find('.num').html());

            $.post("{:U('delcart')}",{id:id},function(data){

                if(data){
                    //成功则删除整个div
                    var old_sub_num = parseInt($('body').find('.sub_num').html());
                    var new_sub_num = (old_sub_num  - num) < 0 ? 0 : (old_sub_num  - num);

                    // 修改右上角购物车数量
                    $('#shopcount').html(new_sub_num);

                    if (new_sub_num == 0) {
                        // 假若商品总数为空，则总额也为 0
                        $('body').find('.sub_num').html(new_sub_num);
                        $('body').find('.itemtotal').html(0);
                        $('#cart_'+goods_id).remove();
                        $('.btnCommon').attr('href' , '').attr('href' , "{:U('Home/GoodsClassify/classify/id/1')}").html('继续购物<em></em>');
                    }else{
                        // 改变商品总数
                        $('body').find('.sub_num').html(new_sub_num);

                        // 先移除商品
                        $('#cart_'+goods_id).remove();

                        // 后获取剩余总额，最后改变显示的商品总额
                        var goods_total = 0;
                        $('.total').each(function(){
                            goods_total += parseInt($(this).html());
                        });
                        $('body').find('.itemtotal').html(goods_total);
                    }

                }
            });
        }

   </script>
</block>
<block name="footer">
    <!-- 尾部style 可以改为模板引入方式-->
    <style media="screen">
    .f{
        width:100%;
        height:55px;
        background:black;
    }

    .f-wrap{
        width:300px;
        margin:0 auto;
        padding-top:15px;
        float:left;
    }

    .footContry{
        width:140px;
        padding:20px 0;
        float:left;
        margin-left:200px;
    }

    .Contry-icon{
        width:17px;
        height:15px;
        background:url(__PUBLIC__/Home/images/footer/common_sprite.png) no-repeat -15px 0;
        display:inline-block;
        vertical-align:middle;
    }

    .footContry a{
        color:#363738;
        text-decoration:none;
        font-size:13px;
        font-family:微软雅黑;
        font-weight:bold;
    }
    .weibo-icon{
        width:27px;
        height:24px;
        background:url(__PUBLIC__/Home/images/footer/common_sprite.png) no-repeat -60px 0;
        cursor:pointer;
        display:inline-block;
    }

    .weibo-icon:hover{
        width:27px;
        height:24px;
        background:url(__PUBLIC__/Home/images/footer/common_sprite.png) no-repeat -60px -24px;
    }

    .weixin-icon{
        width:27px;
        height:24px;
        background:url(__PUBLIC__/Home/images/footer/common_sprite.png) no-repeat -31px 0;
        cursor:pointer;
        display:inline-block;
    }

    .weixin-icon:hover{
        width:27px;
        height:24px;
        background:url(__PUBLIC__/Home/images/footer/common_sprite.png) no-repeat -31px -24px;
        cursor:pointer;
    }
    .footCopyRight{
        width:468px;
        float:right;
        margin-right:200px;
    }


    .copyright-ul li{
        list-style:none;
        float:left;
        margin-right:15px;
        color:#363738;
        font-size:12px;
        font-family:微软雅黑;
        height:40px;
        line-height:40px;
        padding-top:8px;
    }

    .copyright-ul li a{
        text-decoration:none;
        color:#363738;
    }

    .copyright-ul li a:hover{
        color:gray;
    }
    </style>
    <div class="f">
        <div class="footContry">
            <div class="Contry-icon"></div>
            <a href="#">中国</a>
        </div>
        <div class="f-wrap">
            <div class="weibo-icon"></div>
            <div class="weixin-icon"></div>
        </div>

        <div class="footCopyRight">
            <ul class="copyright-ul">
                <li><a href="#">货物所有权转移</a></li>
                <li><a href="#">法律声明</a></li>
                <li><a href="#">隐私条款</a></li>
                <li>苏ICP备14048805号-1</li>
                <li>© 2016 adidas</li>
            </ul>
        </div>
    </div>
</block>
